<template lang="html">
    <div id="tmpl">
        <ul class="mui-table-view">
            <!-- 这是静态页面 -->
            <!-- <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" src="../../../statics/imgs/1.png">
                        <div class="mui-media-body">
                            幸福
                            <p class='mui-ellipsis'>能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" src="../../../statics/imgs/2.png">
                        <div class="mui-media-body">
                            木屋
                            <p class='mui-ellipsis'>想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media">
                    <a href="javascript:;">
                        <img class="mui-media-object mui-pull-left" src="../../../statics/imgs/3.png">
                        <div class="mui-media-body">
                            CBD
                            <p class='mui-ellipsis'>烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
                        </div>
                    </a>
                </li> -->

                <li v-for="item in list" class="mui-table-view-cell mui-media">
                    <router-link v-bind="{to: '/news/newsinfo/'+item.id}">
                        <img class="mui-media-object mui-pull-left" :src="item.img_url">
                        <div class="mui-media-body">
                            {{item.title}}
                            <p class='mui-ellipsis'>{{item.zhaiyao}}</p>
                            <div class="ft">
                                <span>发表时间:{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
                                <span class="click">点击数:{{item.click}}</span>
                            </div>
                        </div>
                    </router-link>
                </li>
        </ul>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import common from '../../kits/common.js';

export default {
    data(){
        return {
            list: []
        }
    },
    created(){
        this.getNewsList();
    },
    methods: {
        //获取新闻列表资讯
        getNewsList(){
            //1.0确定rul
            const url = common.apij + '/api/getnewslist';
            //2.0利用$http.get请求数据
            this.$http.get(url).then(function(response){
                var body = response.body;
                //不正常数据处理
                if (body.status != 0) {
                    Toast(body.message);
                }
                //正常数据处理
                this.list = body.message;


            })
        }
    }
}
</script>

<style lang="css" scoped>
.mui-table-view img{
        width: 80px;
        height: 80px;
    }

    .mui-table-view .mui-media-object{
        max-width: 80px;
        line-height: 80px;
    }

    .ft{
        margin-top: 1.5em;
        font-size: 14px;
        color: #0094ff;
    }

    .ft .click{
        margin-left: 20px;
    }
</style>
